<template>  
  <view>  
    <view style="margin-top: 32rpx; margin-left: 32rpx;">  
      <uni-row>  
        <uni-col :span="4">  
          <view @click="toggleCardVisibility('jinxingzhong')">  
            <text :style="{ 'color': isCardVisibleJxz ? '#000000' : '#5E5E5E' }">进行中</text>  
            <view v-if="isCardVisibleJxz" style="width: 46px; height: 4px; background-image: linear-gradient(90deg, #ffffff00 0%, #276EFF 77%);"></view>  
          </view>  
        </uni-col>  
        <uni-col :span="4">  
          <view @click="toggleCardVisibility('yiwancheng')">  
            <text :style="{ 'color': isCardVisibleYwc ? '#000000' : '#5E5E5E' }">已完成</text>  
            <view v-if="isCardVisibleYwc" style="width: 46px; height: 4px; background-image: linear-gradient(90deg, #ffffff00 0%, #276EFF 77%);"></view>  
          </view>  
        </uni-col>  
      </uni-row>  
        
      <uni-card v-if="isCardVisibleJxz" class="card-style" @click="ceshi1">  
        <view>  
          <text style="font-family: PingFangSC-Medium; font-weight: 500; font-size: 16px; color: #000000;">  
            2023届招生能力测试题目  
          </text>  
        </view>  
        <view style="margin-top: 12rpx;">  
          <text style="color: #5d5c5c; font-size: 12px; font-family: PingFangSC; font-weight: 400; line-height: 20px; letter-spacing: 0;">  
            开始日期：2023/03/29<br>  
            结束日期：2023/03/29<br>  
            剩余提交时间：<text style="color: #ff7700; font-size: 12px; font-family: PingFangSC; font-weight: 400; line-height: 20px; letter-spacing: 0;">3天4时5分</text>  
          </text>  
        </view>  
        <view style="height: 1px; opacity: 0.24; background-color: #979797; margin-top: 19rpx;"></view>  
        <view v-if="item && item.avatarList && item.avatarList.length" style="height: 65rpx; margin-bottom: -30rpx;">  
          <template v-for="(avatar, index) in item.avatarList" :key="index">  
            <image :src="avatar" style="width: 64rpx; height: 64rpx; border: 2rpx solid black; border-radius: 100%; margin-left: -26rpx;"></image>  
          </template>  
        </view>  
        <view style="width: 32px; height: 32px; border: 1px solid #000000; border-radius: 50%; margin-top: 23rpx;"></view>  
      </uni-card>  
      <uni-card v-if="isCardVisibleJxz" class="card-style">
        <view>  
          <text style="font-family: PingFangSC-Medium; font-weight: 500; font-size: 16px; color: #000000;">  
            2023届招生能力测试题目  
          </text>  
        </view>  
        <view style="margin-top: 12rpx;">  
          <text style="color: #5d5c5c; font-size: 12px; font-family: PingFangSC; font-weight: 400; line-height: 20px; letter-spacing: 0;">  
            开始日期：2023/03/29<br>  
            结束日期：2023/03/29<br>  
            剩余提交时间：<text style="color: #ff7700; font-size: 12px; font-family: PingFangSC; font-weight: 400; line-height: 20px; letter-spacing: 0;">3天4时5分</text>  
          </text>  
        </view>  
        <view style="height: 1px; opacity: 0.24; background-color: #979797; margin-top: 19rpx;"></view>  
        <view v-if="item && item.avatarList && item.avatarList.length" style="height: 65rpx; margin-bottom: -30rpx;">  
          <template v-for="(avatar, index) in item.avatarList" :key="index">  
            <image :src="avatar" style="width: 64rpx; height: 64rpx; border: 2rpx solid black; border-radius: 100%; margin-left: -26rpx;"></image>  
          </template>  
        </view>  
        <view style="width: 32px; height: 32px; border: 1px solid #000000; border-radius: 50%; margin-top: 23rpx;"></view>  
      </uni-card> 
	  <uni-card v-if="isCardVisibleJxz" class="card-style">
	    <view>  
	      <text style="font-family: PingFangSC-Medium; font-weight: 500; font-size: 16px; color: #000000;">  
	        2023届招生能力测试题目  
	      </text>  
	    </view>  
	    <view style="margin-top: 12rpx;">  
	      <text style="color: #5d5c5c; font-size: 12px; font-family: PingFangSC; font-weight: 400; line-height: 20px; letter-spacing: 0;">  
	        开始日期：2023/03/29<br>  
	        结束日期：2023/03/29<br>  
	        剩余提交时间：<text style="color: #ff7700; font-size: 12px; font-family: PingFangSC; font-weight: 400; line-height: 20px; letter-spacing: 0;">3天4时5分</text>  
	      </text>  
	    </view>  
	    <view style="height: 1px; opacity: 0.24; background-color: #979797; margin-top: 19rpx;"></view>  
	    <view v-if="item && item.avatarList && item.avatarList.length" style="height: 65rpx; margin-bottom: -30rpx;">  
	      <template v-for="(avatar, index) in item.avatarList" :key="index">  
	        <image :src="avatar" style="width: 64rpx; height: 64rpx; border: 2rpx solid black; border-radius: 100%; margin-left: -26rpx;"></image>  
	      </template>  
	    </view>  
	    <view style="width: 32px; height: 32px; border: 1px solid #000000; border-radius: 50%; margin-top: 23rpx;"></view>  
	  </uni-card> 
      <uni-card v-if="isCardVisibleYwc" class="card-style1">  
        <view>  
          <text>这里可以展示已完成的内容...</text>  
        </view>  
      </uni-card>  
    </view>  
  </view>  
</template>  
  
<script setup>  
import { ref } from 'vue';  
  
const isCardVisibleJxz = ref(true); // 初始时“进行中”卡片可见  
const isCardVisibleYwc = ref(false); // 初始时“已完成”卡片不可见  
const item = ref(null); // 假设这是从某个地方获取的活动数据  
  
// 假设在某个时机，你从API或其他地方获取了活动数据  
// item.value = activities[0]; // 示例：直接取数组的第一个元素作为示例数据  
  
function ceshi1()  {  
	  uni.navigateTo({  
	    url: '/pages/cs/lianxi3'  
	  });  
	} 
function toggleCardVisibility(type) {  
  if (type === 'jinxingzhong') {  
    isCardVisibleJxz.value = !isCardVisibleJxz.value;  
    if (isCardVisibleJxz.value) {  
      isCardVisibleYwc.value = false; // 如果“进行中”卡片打开，则关闭“已完成”卡片  
    }  
  } else if (type === 'yiwancheng') {  
    isCardVisibleYwc.value = !isCardVisibleYwc.value;  
    if (isCardVisibleYwc.value) {  
      isCardVisibleJxz.value = false; // 如果“已完成”卡片打开，则关闭“进行中”卡片  
    }  
  }  
}  
  
// 示例数据（这里应该通过API或其他方式获取）  
const activities = [{  
  activityId: 1,  
  activityType: '招宣活动',  
  title: '2023届应届生招生活动',  
  banner: '',  
  beginDate: '2023/03/29', // 修正拼写错误  
  endDate: '2023/03/29',  
  area: '湖北省武汉市洪山区',  
  group: '宣传组名称1',  
  memberNum: 28,  
  avatarList: ['1', '2', '3', '4', '5'],  
  status: true,  
}];  
</script>  
  
<style>  
.card-style, .card-style1 {  
  height: 170px;  
  background: #FFFFFF;  
  box-shadow: 0 3px 6px 0 #c9cfd980;  
  border-radius: 8px;  
}  
/* 可以为 .card-style1 添加不同的样式以区分卡片 */  
.card-style1 {  
  /* ... */  
}  
</style>

